@function pxTorem($p){
    @return $p/75 +rem;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ol,ul{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    display: block;
}
html,body{
    height: 100%;  
}
.contanier{
    height: 100%;
    display: flex;
    flex-direction: column;

    header{
        flex-basis: pxTorem(100);
        background-color: #fe4a65;
        display: flex;
        justify-content: space-between;
        align-items: center;
       
        .left{ 
            color: #fff;
            padding-left: pxTorem(20);
            font-size: pxTorem(40);
        }
        .center{
            color: #fff;
            font-size:pxTorem(40); 
        }
        .right{
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding:pxTorem(20) pxTorem(20) pxTorem(20) 0;
          
            span{
                &:nth-child(1){
                    font-size: pxTorem(60);
                }

                &:nth-child(2){
                    font-size: pxTorem(6);
                }
            }
        }

    }

    nav{

         flex-basis: pxTorem(80);
         background-color: #fff;
          
       .mui-segmented-control-inverted .mui-control-item{
             color: #000;
             font-size: pxTorem(36);  
         }
        .mui-segmented-control-inverted .mui-control-item.mui-active{
            color:#eb6e70;
            border: 0;
            border-bottom: 2px solid red; 
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-control-item{
            padding: 0 23px;
        }
       
     }
  
     main{
         flex: 1;
         background-color:#fff; 
         position: relative;

         .products{
            height: 100%;
            width: 100%;
           margin-top: 10px;         
           ul{
             
               li{
                   width: 100%;
                   display: flex;
                   height: pxTorem(340);
                   border-bottom: 2px solid #ccc;          
                   margin: pxTorem(20) 0;
                   .left{
                       flex-basis: 35%;
                       height: pxTorem(320);
                       width: 35%;
                        
                       img{
                           width: 100%;
                           height: 100%;
                       }
                   }
                   .right{
                       margin-left: pxTorem(10);
                       flex: 1;
                       height: pxTorem(320);                   
                       width: 100%;
                       display: flex;
                       flex-direction: column;
                      justify-content: space-around;
                     
                      .name{
                          display: inline-block;
                          color: #000;
                          font-size: 18px;
                          margin: 0;
                      }
                      .price{
                          margin: 0;
                          color: red;
                        font-size: 25px;
                         
                          i{
                            font-style:normal;
                            font-size: 20px
                          }
                          em{
                              margin-left: 5px;
                              font-size: 18px
                          }
                          del{
                              margin-left: 10px;
                              color: #ccc;
                              font-size: 18px
                          }
                      
                      }

                      .num{
                          
                          span{
                            display: inline-block;
                            width: pxTorem(180);
                            height: pxTorem(40);
                            border: 1px solid red;
                            border-radius: pxTorem(15);
                            background-color: #ffb7b7;
                            text-align: center;
                            color: #fff;
                            }

                        b{
                            margin-left: 8px;
                            font-size: pxTorem(28);
                            font-weight: normal;
                            color: red;
                        }

                       
                      }

                      .money{ 
                        width: 100%;        
                        height: pxTorem(60);       
                        a{
                            display: inline-block;
                            height: pxTorem(60);
                            width: 60%;
                            line-height: pxTorem(60);
                            color: red;   
                            border: 1px dashed red; 
                            text-align: center;           
                        }                    
                        button{
                            margin-left: pxTorem(20);
                        }
                      }
                                            
                   }
               }
           }
       } 

     }

    footer{
        flex-basis: pxTorem(180);
        background-color: #efefef;
    
       ul{
           height: pxTorem(80);
           border-top: 2px solid #d6d6d6;
           border-bottom: 2px solid #d6d6d6;
           
           li{
               float: left;
               width: 32%;
               line-height: pxTorem(80);
               text-align: center;
               color: #000;
               &:nth-child(2){
                   border-left: 2px solid #d6d6d6;
                   border-right: 2px solid #d6d6d6;
               }
           }
       }
       .up{
           width: 100%;  
            padding: pxTorem(15) 0;
           display: flex;
           flex-direction: column;  
           align-items: center; 
           justify-content: center;   
            .message{
                text-align: center;           
                span{
                    &:nth-child(1){
                       color: red;
                    }
                    &:nth-child(2){
                        color: #000;
                     }
                     &:nth-child(3){
                        color: #ccc;
                     }

                }
     
            }

            p{
                margin: 0;
                text-align: center;
            }

            // text-align: center;
            // font-size: 12px;
            // color: #666;
            // padding: 15px 0;
               
       }

    } 



   
    
    
    
}